<template>
	<div class="createeditlabel">
		<div class="createeditlabelTop">
			<div class="createeditlabelTopLeft">
				<img @click="back" src="../../../../../assets/images/后退.png" />
				<span>选择标签</span>
			</div>
			<span @click="save">保存</span>
		</div>
		<div class="createeditlabelSet">
			请选择合适的标签,最多选择3个,已选择<span>{{arr2.length}}</span>个
		</div>
		<div class="createeditlabelBot">
			<div class="labelList">
				<ul v-for="(err,index) in arr" :key="index">
					<li>
						<i :class="err.iconclass"></i>
						<span>{{err.name}}</span>
					</li>
					<li @click="err2active(index,index2)" :class="err2.border=='red'?'activeclass':''" v-for="(err2,index2) in err.list" :key="index2">
						<span>{{err2.name}}</span>
					</li>
				</ul>
			</div>
		</div>
	</div>
</template>

<script>
	export default {
		name: "createeditlabel",
		data() {
			return {
				isShow:"",
				arr2:[],
				arr:[
					{
						name:"语种",
						iconclass:"iconfont3 icon-yuzhongguanli" ,
						list:[
							{name:"华语",border:"fff"},
							{name:"欧美",border:"fff"},
							{name:"日语",border:"fff"},
							{name:"韩语",border:"fff"},
							{name:"粤语",border:"fff"}
						]
					},
					{
						name:"风格",
						iconclass:"iconfont3 icon-fengge" ,
						list:[
							{name:"流行",border:"fff"},
							{name:"摇滚",border:"fff"},
							{name:"民谣",border:"fff"},
							{name:"电子",border:"fff"},
							{name:"舞曲",border:"fff"},
							{name:"说唱",border:"fff"},
							{name:"轻音乐",border:"fff"},
							{name:"爵士",border:"fff"},
							{name:"乡村",border:"fff"},
							{name:"R&B/Soul",border:"fff"},
							{name:"古典",border:"fff"},
							{name:"民族",border:"fff"},
							{name:"英伦",border:"fff"},
							{name:"金属",border:"fff"},
							{name:"朋克",border:"fff"},
							{name:"蓝调",border:"fff"},
							{name:"雷鬼",border:"fff"},
							{name:"世界音乐",border:"fff"},
							{name:"拉丁",border:"fff"},
							{name:"New Age",border:"fff"},
							{name:"古风",border:"fff"},
							{name:"后摇",border:"fff"},
						]
					},
					{
						name:"情感",
						iconclass:"iconfont3 icon-xiaolian" ,
						list:[
							{name:"清晨",border:"fff"},
							{name:"夜晚",border:"fff"},
							{name:"学习",border:"fff"},
							{name:"工作",border:"fff"},
							{name:"午休",border:"fff"},
							{name:"下午茶",border:"fff"},
							{name:"地铁",border:"fff"},
							{name:"驾车",border:"fff"},
							{name:"运动",border:"fff"},
							{name:"旅行",border:"fff"},
							{name:"散步",border:"fff"},
							{name:"酒吧",border:"fff"}
						]
					},
					{
						name:"主题",
						iconclass:"iconfont3 icon-xiaolian" ,
						list:[
							{name:"影视原声",border:"fff"},
							{name:"ACG",border:"fff"},
							{name:"儿童",border:"fff"},
							{name:"校园",border:"fff"},
							{name:"游戏",border:"fff"},
							{name:"70后",border:"fff"},
							{name:"80后",border:"fff"},
							{name:"90后",border:"fff"},
							{name:"网络歌曲",border:"fff"},
							{name:"KTV",border:"fff"},
							{name:"经典",border:"fff"},
							{name:"翻唱",border:"fff"},
							{name:"吉他",border:"fff"},
							{name:"钢琴",border:"fff"},
							{name:"器乐",border:"fff"},
							{name:"榜单",border:"fff"},
							{name:"00后",border:"fff"}
						]
					}
				]
			}
		},
		methods:{
			err2active(index,index2){
				if(this.arr[index].list[index2].border != "red"){
					if(this.arr2.length<3){
						this.$set(this.arr[index].list[index2],'border','red')
						this.arr2.push(this.arr[index].list[index2])
					}
				}else{
					this.$set(this.arr[index].list[index2],'border','fff')
					let index3 = this.arr2.indexOf(this.arr[index].list[index2])
					this.arr2.splice(index3,1)
				}
				
//				this.arr[index].list[index2]. = "red";
				console.log(this.arr2)
//				console.log(this.arr2.indexOf(this.arr[index].list[index2]))
			},
			back(){
				this.$router.go(-1)
			},
			save(){
				this.$router.push({
					name: 'createedit',
					params: {
						arr2: this.arr2
					}
				})
			}
		},
		mounted(){
			$("ul li").each(function(){
				let _li = Math.round($(this).height())
				$(this).css("height", _li);
			})
		}
	}
</script>

<style lang="scss" scoped>
@import "~@/assets/css/common.scss";
	.createeditlabel{
		.createeditlabelTop {
			padding: vw(10) vw(20) vw(10) vw(20);
			display: flex;
			justify-content: space-between;
			align-items: center;
			.createeditlabelTopLeft {
				font-size: 0;
				display: flex;
				align-items: center;
				img {
					width: vw(22);
					height: vw(22);
				}
				span {
					font-size: vw(16);
					line-height: vw(16);
					color: #5a5a5a;
					margin-left: vw(10);
				}
			}
			span {
				font-size: vw(16);
				line-height: vw(16);
				color: #5a5a5a;
			}
		}
		.createeditlabelSet{
			padding: vw(12) vw(20);
			border-bottom: 1px solid #f0f0f0;
			color: #7c7c7c;
			font-size: vw(12);
		}
		.createeditlabelBot{
			.labelList{
				ul{
					overflow: hidden;
					li{
						border-bottom: 1px solid #f6f6f6;
						border-right: 1px solid #f6f6f6;
						box-sizing: border-box;
						width: 25%;
						height: vw(62);
						display: flex;
						justify-content: center;
						align-items: center;
						font-size: 0;
						flex-direction: column;
						float: left;
						i{
							font-size: vw(25);
							/*height: vw(26);*/
						}
						span{
							font-size: vw(14);
						}
					}
					.activeclass{
						border: vw(1) solid red;
					}
					li:nth-child(1){
						height: vw(123);
					}
				}
			}
		}
	}
</style>